<template>
	<view class="addDevice ff-line-height-1-3">
		<!-- loging相关 -->
		<f-loading ref="loading" />
		<f-uToast ref="uToast" />
		<f-compressImgs ref="compressImgs" />
		<f-navbar-normal :title="titleList.title" :iconLeft="titleList.iconLeft" :isBack="titleList.isBack"
			@goBack="goBack" />
		<view class="addDevice-box">
			<view class="addDevice-box-title ff-font-15 ff-font-weight-600">业务信息</view>
			<view class="addDevice-box-content ff-padding-14 ff-bg-fff">
				<view class="ff-flex-between ff-align-items-one"
					:class="{ 'ff-border-bottom': configSystem.configSystemList.length > 0, 'ff-padding-bottom-15': configSystem.configSystemList.length > 0}">
					<view class="addDevice-box-content-title ident">业务平台</view>
					<picker mode="selector" :value="businessList.businessIndex" :range="businessList.businessNameList"
						@change="changeBusiness">
						<view class="tabsAllBox-but-type">
							<view v-if="!businessList.businessName" class="ff-align-items-one">
								<view class="ff-color-333">请选择</view>
								<u-icon name="arrow-right" color="#333"></u-icon>
							</view>
							<view v-else class="ff-align-items-one">
								<view class="tabsAllBox-but-type-title">{{ businessList.businessName }}</view>
								<u-icon name="arrow-right" color="#333"></u-icon>
							</view>
						</view>
					</picker>
				</view>
				<!-- {{configSystem.configSystemList}} -->

				<view v-for="(item, index) of configSystem.configSystemList" :key="index">
					<!-- 单选 -->
					<view v-if="item.fieldType == 2 || item.fieldType == 6"
						class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15">
						<view class="addDevice-box-content-title" :class="{'ident': item.isRequired == 1}">{{item.fieldName}}
						</view>
						<picker mode="selector" :value="item.singleIndex" :range="item.pikerInfo"
							indicator-style="height:2350rpx;" :range-key="`${item.fieldLabel}`"
							@change="changeSingle($event, item)">
							<view class="tabsAllBox-but-type">
								<view v-if="!item.fieldValueStr" class="ff-align-items-one">
									<view class="ff-color-333">请选择</view>
									<u-icon name="arrow-right" color="#333"></u-icon>
								</view>
								<view v-else class="ff-align-items-one">
									<view class="tabsAllBox-but-type-title">{{ item.fieldValueStr }}</view>
									<u-icon name="arrow-right" color="#333"></u-icon>
								</view>
							</view>
						</picker>
					</view>
					<!-- 多选 -->
					<view>
						<view v-if="item.fieldType == 3"
							class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15">
							<view class="addDevice-box-content-title" :class="{'ident': item.isRequired == 1}">
								{{item.fieldName}}
							</view>
							<view @click.stop="multipleClick(item)" style="max-width: 500rpx;">
								<view v-if="!item.fieldValueStr" class="ff-align-items-one ff-color-333">
									请选择
									<u-icon name="arrow-right" color="#333"></u-icon>
								</view>
								<view v-else class="ff-align-items-one">
									<view>
										{{item.fieldValueStr}}
									</view>
									<u-icon name="arrow-right" color="#333"></u-icon>
								</view>
							</view>
						</view>
						<u-popup :show="multipleBox.multipleState" @close="closeMultiple" closeable="true">
							<view class="multipleBox ff-relative">
								<view class="ff-text-center ff-padding-bottom-15 ff-font-weight-600">
									请选择{{multipleBox.multipleItem.fieldName}}
								</view>
								<scroll-view scroll-y="true" style="height: 800rpx;">
									<u-checkbox-group v-model="multipleBox.multipleIndex" placement="column"
										@change="multipleChange">
										<u-checkbox :customStyle="{marginBottom: '30rpx'}"
											v-for="(itemSon, index) of multipleBox.multipleList" :key="index"
											:label="itemSon.fieldLabel" :name="itemSon.id">
										</u-checkbox>
									</u-checkbox-group>
									<view class="multipleBox-butList ff-flex-between">
										<view><u-button @click="closeMultiple" text="取消"></u-button></view>
										<view><u-button @click="confirmMultiple" type="success" text="确定"></u-button></view>
									</view>
								</scroll-view>
							</view>
						</u-popup>
					</view>
					<!-- 树形结构 -->
					<view v-if="item.fieldType == 5"
						class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15">
						<view class="addDevice-box-content-title" :class="{ 'ident': item.isRequired == 1}">{{item.fieldName}}
						</view>
						<view class="tabsAllBox-but-type ff-align-items">
							<!-- 'treeLabel' -->
							<uni-data-picker :placeholder="item.treeName" @popupopened="treeClick"
								@popupclosed="closeTreeClick" :popup-title="`请选择${item.fieldName}`" v-model="item.fieldValue"
								:clear-icon="false" :localdata="item.pikerInfo" :map="{ text: item.fieldLabel, value: 'id' }"
								@change="onchangeTree($event, item)" @nodeclick="onnodeclick"></uni-data-picker>
							<u-icon name="arrow-right" color="#333"></u-icon>
						</view>
					</view>
					<!-- 输入框 -->
					<view v-if="item.fieldType == 1"
						class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15">
						<view class="addDevice-box-content-title" :class="{'ident': item.isRequired == 1}">{{item.fieldName}}
						</view>
						<input type="text" v-model="item.fieldValue" class="ff-text-right ff-padding-right-10"
							placeholder-style="color:#999" placeholder="请输入" />
					</view>
					<!-- 文本框 -->
					<view v-if="item.fieldType == 4" class="ff-padding-top-15 ff-border-bottom ff-padding-bottom-15">
						<view class="addDevice-box-content-title ff-margin-bottom-15"
							:class="{'ident': item.isRequired == 1}">{{item.fieldName}}</view>
						<textarea v-if="textareaState" v-model="item.fieldValue" placeholder-style="color:#999"
							placeholder="请输入" maxlength="-1" />
					</view>
				</view>
			</view>
		</view>
		<view class="addDevice-box">
			<view class="addDevice-box-title ff-font-16 ff-font-weight-600">设备信息</view>
			<view class="addDevice-box-content ff-padding-top-15 ff-padding-bottom-15 ff-padding-left-15 ff-bg-fff">
       <view class="ff-flex-between ff-align-items-one  ff-padding-bottom-15 ff-border-bottom">
         <view class="addDevice-box-content-title ident">终端名称</view>
         <view class="codeBox ff-align-items-one ff-width-260">
           <input type="text" v-model="paramsSumbit.deviceName" maxlength="10" class="ff-text-right ff-padding-right-10" placeholder-style="color:#999" placeholder="请输入终端名称" />
         </view>
       </view>
				<view class="ff-flex-between ff-align-items-one ff-padding-right-15">
					<view class="addDevice-box-content-title ident">终端编码</view>
					<view class="codeBox ff-align-items-one ff-width-260">
						<input type="text" v-model="paramsSumbit.deviceImei" @input="changeDeviceImei"
							class="ff-text-right ff-padding-right-10" placeholder-style="color:#999"
							placeholder="请扫描设备二维码或输入" />
						<image class="code" @click="scanCodeClick"
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/code.png" mode=""></image>
					</view>
				</view>
				<view class="ff-padding-top-15" v-if="deviceImeiList.deviceImeiInfo.id">
					<view class="addDevice-box-content-title ff-margin-bottom-15">产品信息</view>
					<view class="productInfo ff-border-radius-3 ff-padding-14 ff-font-14
					
					">
						<view class="ff-align-items-one ff-margin-bottom-15">
							<view class="ff-color-999 ff-margin-right-26">产品</view>
							<view>{{deviceImeiList.deviceImeiInfo.productName || '/'}}</view>
						</view>
						<view class="ff-align-items-one ff-margin-bottom-15">
							<view class="ff-color-999 ff-margin-right-26">分类</view>
							<view>{{deviceImeiList.deviceImeiInfo.classifyName}}</view>
						</view>
						<view class="ff-align-items-one">
							<view class="ff-color-999 ff-margin-right-10">供应商</view>
							<view>{{deviceImeiList.deviceImeiInfo.supplierName}}</view>
						</view>
					</view>
				</view>
				<view class="ff-flex-between ff-align-items-one ff-padding-top-20 ff-padding-bottom-5"
					v-if="deviceImeiList.deviceImeiInfo.isTeleporter == 1">
					<view class="addDevice-box-content-title ident">主机品牌</view>
					<view>
						<picker mode="selector" :value="brands.brandIndex" :range="brands.brandNameList"
							@change="confirmBrand">
							<view class="tabsAllBox-but-type">
								<view v-if="!brands.brandName" class="ff-align-items-one">
									<view class="ff-color-333">请选择</view>
									<u-icon name="arrow-right" color="#333"></u-icon>
								</view>
								<view v-else class="ff-align-items-one">
									<view class="tabsAllBox-but-type-title">{{ brands.brandName }}</view>
									<u-icon name="arrow-right" color="#333"></u-icon>
								</view>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="addDevice-box">
			<view class="addDevice-box-title ff-font-15 ff-font-weight-600">安装信息</view>
			<view class="addDevice-box-content ff-padding-14 ff-bg-fff">
				<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-top-5 ff-padding-bottom-15">
					<view class="addDevice-box-content-title ident">安装区域</view>
					<picker mode="multiSelector" :range="areaBox.mulSelect" :range-key="'title'" @change="pickerChange"
						confirmTextColor="red" @columnchange="colChange">
						<view v-if="!areaBox.address" class="ff-align-items-one">
							<view class="ff-color-333">请选择</view>
							<u-icon name="arrow-right" color="#333"></u-icon>
						</view>
						<view v-else class="ff-align-items-one">
							<view class="tabsAllBox-but-type-title">{{ areaBox.address }}</view>
							<u-icon name="arrow-right" color="#333"></u-icon>
						</view>
					</picker>
				</view>
				<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15">
					<view class="addDevice-box-content-title">街道/乡/镇</view>
					<picker mode="selector" :range="areaBox.stree" :range-key="'title'" @change="streeChange">
						<view v-if="!areaBox.streeName" class="ff-align-items-one">
							<view class="ff-color-333">请选择</view>
							<u-icon name="arrow-right" color="#333"></u-icon>
						</view>
						<view v-else class="ff-align-items-one">
							<view class="tabsAllBox-but-type-title">{{ areaBox.streeName }}</view>
							<u-icon name="arrow-right" color="#333"></u-icon>
						</view>
					</picker>
				</view>
				<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15">
					<view class="addDevice-box-content-title">村居/社区</view>
					<picker mode="selector" :range="areaBox.village" :range-key="'title'" @change="villageChange">
						<view v-if="!areaBox.villageName" class="ff-align-items-one">
							<view class="ff-color-333">请选择</view>
							<u-icon name="arrow-right" color="#333"></u-icon>
						</view>
						<view v-else class="ff-align-items-one">
							<view class="tabsAllBox-but-type-title">{{ areaBox.villageName }}</view>
							<u-icon name="arrow-right" color="#333"></u-icon>
						</view>
					</picker>
				</view>
				<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15">
					<view class="addDevice-box-content-title ident1 ff-width-18-5">详细地址</view>
					<view @click.stop="chooseLocationClick" style="max-width: 500rpx;">
						<view v-if="!paramsSumbit.address" class="ff-align-items-one ff-color-333 ff-margin-right-8">
							请选择
							<u-icon name="map" size="18" color="#2B56FD"></u-icon>
						</view>
						<view v-else class="ff-align-items-one">
							<view class="tabsAllBox-but-type-title">{{ paramsSumbit.address }}</view>
							<u-icon name="arrow-right" color="#333"></u-icon>
						</view>
					</view>
				</view>
				<view class="ff-padding-top-15 ff-padding-bottom-15 ff-border-bottom">
					<view class="addDevice-box-content-title ff-margin-bottom-15 ident1 ff-width-18-5">安装位置</view>
					<textarea v-if="textareaState" v-model.trim="paramsSumbit.position" placeholder-style="color:#999"
						placeholder="请输入" maxlength="-1" />
				</view>
				<view class="ff-padding-top-15 ff-padding-bottom-15 ff-border-bottom">
					<view class="addDevice-box-content-title ff-margin-bottom-15">安装图片</view>
					<!-- <u-upload :fileList="uploadImgs.fileList" @afterRead="afterRead" @delete="deletePic" name="1"
						:maxCount="99"></u-upload> -->
					<view class="imgsBox ff-flex-wrap">
						<view class="imgsBox-img" v-for="(item, index) of imgBox.installImg" :key="index">
							<view class="ff-margin-bottom-10 ff-relative" @click="previewImgClick(item, 1)">
								<image class="imgDevice" :src="item" mode="" />
								<view @click.stop="deteleImgClick(index, 1)" class="closeIcon"><u-icon name="close" color="#fff"
										size="12"></u-icon></view>
							</view>
						</view>
						<view class="imgsBox-img">
							<image class="imgDevice" @click="upateImgClick(1)"
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/take-photos.png"
								mode="" />
						</view>
					</view>
				</view>
				<view class="ff-padding-top-15 ff-padding-bottom-15 ff-border-bottom"
					v-if="deviceImeiList.deviceImeiInfo.isTeleporter == 1">
					<view class="addDevice-box-content-title ff-margin-bottom-7">火灾控制器(消防主机)图片</view>
					<view class="ff-margin-bottom-15 ff-font-13 ff-color-666">
						请拍摄
						<text class="ff-color-blue">品牌、型号、打印机型号、安装排线</text>
						等照片
					</view>
					<view class="imgsBox ff-flex-wrap">
						<view class="imgsBox-img" v-for="(item, index) of imgBox.fireImg" :key="index">
							<view class="ff-margin-bottom-10 ff-relative" @click="previewImgClick(item, 2)">
								<image class="imgDevice" :src="item" mode="" />
								<view @click.stop="deteleImgClick(index, 2)" class="closeIcon"><u-icon name="close" color="#fff"
										size="12"></u-icon></view>
							</view>
						</view>
						<view class="imgsBox-img">
							<image class="imgDevice" @click="upateImgClick(2)"
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/take-photos.png"
								mode="" />
						</view>
					</view>
				</view>
				<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15">
					<view class="addDevice-box-content-title">安装人</view>
					<view class="ff-color-9A9A9A">{{ state.infoList.userInfo.nick_name }}</view>
				</view>
				<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-top-15 ff-padding-bottom-15">
					<view class="addDevice-box-content-title">手机号</view>
					<view class="ff-color-9A9A9A">{{ state.infoList.userInfo.account }}</view>
				</view>
				<view class="ff-padding-top-15">
					<view class="addDevice-box-content-title ff-margin-bottom-15">备注</view>
					<textarea v-if="textareaState" v-model.trim="paramsSumbit.installRemark" placeholder-style="color:#999"
						placeholder="请输入" maxlength="-1" />
				</view>
			</view>
			<view class="addDevice-butList ff-flex-between">
				<view class=""><u-button @click="saveDraft" text="存草稿"></u-button></view>
				<view class=""><u-button @click="submitInstall" type="primary" text="提交安装"></u-button></view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
	import { onLoad, scanCode } from '@dcloudio/uni-app';
	import { useStore } from 'vuex';
	const { state, commit, dispatch } = useStore();
	import config from '@/tools/config.js';
	const { proxy } = getCurrentInstance();

	let installId = ref(null)
	onLoad(e => {
		console.log('前页面传过来的数据----', e.installId);
		if (e.installId) {
			installId = e.installId
			setTimeout(() => {
				getInstallDetails(e.installId) // 获取安装详情
			}, 1000)
		}

	});
	onMounted(() => {
		getThirdPartySystem(); // 请求业务平台列表数据
		getBrandList() // 请求主机品牌
		getProvince() // 省市区懒加载方法
	})

	let textareaState = ref(true) // textarea文本框显/隐

	// 获取安装详情
	let thirdPartySystemBox = reactive({ thirdPartySystemConfigList: [] })
	let getInstallDetails = async (id) => {
		textareaState.value = false // 文本框隐藏
		loading.value.openLoading('加载中···'); // 打开loading
		const data = await proxy.$http.get({ url: `/install/detail/${id}` })
		loading.value.closeLoading(); // 关闭loading
		textareaState.value = true // 文本框显示
		// console.log('获取安装详情------', data)
		if (data.code == 200) {
			let infoList = data.data
			// 安装平台系列
			paramsSumbit.thirdPartySystemId = infoList.thirdPartySystemId
			paramsSumbit.businessIndex = infoList.thirdPartySystemId
			businessList.businessName = infoList.systemName
			// 安装平台配置字段系列
			if (infoList.thirdPartySystemInstallConfig != '[]') {
				// paramsSumbit.thirdPartySystemConfigList = JSON.parse(infoList.thirdPartySystemInstallConfig)
				// configSystem.configSystemList = paramsSumbit.thirdPartySystemConfigList
				// configSystem.configSystemList.forEach(res => {
				// 	if (res.fieldType == 2 || res.fieldType == 3 || res.fieldType == 5) {
				// 		res.fieldValue = res.fieldValue
				// 	}
				// })
				thirdPartySystemBox.thirdPartySystemConfigList = JSON.parse(infoList
					.thirdPartySystemInstallConfig) // 获取后台返回的配置数组
				configSystem.configSystemList = [] // 清空各个类型的数据
				getConfigSystem(paramsSumbit.thirdPartySystemId); // 获取接口配置列表列表数据
			} else {
				paramsSumbit.thirdPartySystemConfigList = []
				configSystem.configSystemList = paramsSumbit.thirdPartySystemConfigList
			}
			// console.log(configSystem.configSystemList, 'configSystem.configSystemList----详情返回的')

			// 设备系列
			paramsSumbit.id = infoList.id
			paramsSumbit.deviceImei = infoList.deviceImei
			deviceImeiList.deviceImeiInfo.id = infoList.id
			deviceImeiList.deviceImeiInfo.productName = infoList.productName
			deviceImeiList.deviceImeiInfo.classifyName = infoList.classifyName
			deviceImeiList.deviceImeiInfo.supplierName = infoList.supplierName
			deviceImeiList.deviceImeiInfo.isTeleporter = infoList.isTeleporter
			// 主机品牌
			paramsSumbit.manufactorId = infoList.manufactorId
			brands.brandIndex = infoList.manufactorId
			brands.brandName = infoList.manufactorName
			// 安装区域
			paramsSumbit.deptProvinceId = infoList.deptProvinceId
			paramsSumbit.deptCityId = infoList.deptCityId
			paramsSumbit.deptAreaId = infoList.deptAreaId
			paramsSumbit.deptStreetId = infoList.deptStreetId
			paramsSumbit.deptVillageId = infoList.deptVillageId
			areaBox.address = infoList.deptProvinceName + infoList.deptCityName + infoList.deptAreaName // 省市区
			areaBox.streeName = infoList.deptStreetName // 街道名称
			if (paramsSumbit.deptAreaId) {
				getStreet(paramsSumbit.deptAreaId) // 获取街道的数据列表（传区得数据）
			}
			areaBox.villageName = infoList.deptVillageName // 村居名称
			if (paramsSumbit.deptStreetId) {
				getVillage(paramsSumbit.deptStreetId) // 获取村居的数据列表(传街道的id)
			}
			// 详细信息
			paramsSumbit.longitude = infoList.longitude
			paramsSumbit.latitude = infoList.latitude
			paramsSumbit.address = infoList.address
			// 安装位置
			paramsSumbit.position = infoList.position
			// 安装图片
			if (infoList.installImg) {
				// console.log(infoList.installImg, 'imgBox.installImg')
				imgBox.installImg = infoList.installImg.split(',')
				paramsSumbit.installImg = imgBox.installImg
			} else {
				paramsSumbit.installImg = []
				imgBox.installImg = []
			}
			// 火灾控制器（消防主机）图片
			if (infoList.fireImg) {
				imgBox.fireImg = infoList.fireImg.split(',')
				paramsSumbit.fireImg = imgBox.fireImg
			} else {
				paramsSumbit.fireImg = []
				imgBox.fireImg = []
			}
			// 安装备注
			paramsSumbit.installRemark = infoList.installRemark
		}
	}

	// 提交参数相关
	let paramsSumbit = reactive({
		thirdPartySystemId: '', // 安装平台ID
		thirdPartySystemConfigList: [], // 接口配置字段集合
		id: '', // 设备ID，通过imei获取的设备接口返回
		deviceImei: '', // deviceImei号
    deviceName:'', // deviceName
		classifyId: '', // 设备分类ID
		manufactorId: '', // 主机品牌ID
		deptProvinceId: '', // 省ID
		deptCityId: '', // 市ID
		deptAreaId: '', // 区ID
		deptStreetId: '', // 街道ID
		deptVillageId: '', // 	村ID
		longitude: '', // 	经度
		latitude: '', // 纬度
		address: '', // 详细地址
		position: '', // 安装位置
		installImg: [], // 安装图片，多个逗号分隔
		fireImg: [], // 火灾控制器（消防主机）图片，仅用传需要上传，多个逗号分隔
		installRemark: '' // 安装备注
	});

	// 导航栏相关
	let titleList = reactive({
		title: '华安应急智慧物联设备平台',
		iconLeft: true,
		isBack: true
	});
	// 返回上一层
	let goBack = () => {
		let infoLength = Object.keys(paramsSumbit).length
		if (paramsSumbit.thirdPartySystemId || paramsSumbit.thirdPartySystemConfigList.length > 0 || paramsSumbit
			.deviceImei || paramsSumbit.manufactorId || paramsSumbit.deptProvinceId || paramsSumbit.deptStreetId ||
			paramsSumbit.deptVillageId || paramsSumbit.longitude || paramsSumbit.position || paramsSumbit.installImg
			.length > 0 || paramsSumbit.fireImg.length > 0 || paramsSumbit.installRemark) {
			configSystem.configSystemList.forEach(res => {
				if (res.fieldType == 2 || res.fieldType == 3 || res.fieldType == 5) {
					res.fieldValue = res.fieldValue.toString()
				}
				if (res.fieldType == 1 || res.fieldType == 4) {
					res.fieldValueStr = res.fieldValue
				}
			})
			paramsSumbit.thirdPartySystemConfigList = configSystem.configSystemList
			let installImg = imgBox.installImg.toString()
			let fireImg = imgBox.fireImg.toString()
			paramsSumbit.installImg = installImg
			paramsSumbit.fireImg = fireImg
			uni.showModal({
				title: '温馨提示',
				content: '是否存草稿？',
				showCancel: true,
				confirmColor: '#2954FD',
				success: function (res) {
					if (res.confirm) {
						if (!paramsSumbit.id) {
							uToast.value.openuToastError('请输入或扫描二维码获取终端编码，否则不能存草稿')
							return
						}
						textareaState.value = false // 文本框隐藏
						loading.value.openLoading('存储中···'); // 打开loading
						proxy.$http.post({ url: '/install/saveDraft', data: paramsSumbit }).then(res => {
							// console.log('存草稿返回------', res.data)
							loading.value.closeLoading(); // 关闭loading
							textareaState.value = true
							if (res.code == 200) {
								uToast.value.openuToastSuccess(res.msg)
								setTimeout(() => {
									proxy.$pageJump.reLaunch('/pages/views/install/index');
								}, 500)
							} else {
								uToast.value.openuToastError(res.msg)
							}
						})
					} else {
						proxy.$pageJump.reLaunch('/pages/views/install/index');
					}
				}
			})
		} else {
			proxy.$pageJump.reLaunch('/pages/views/install/index');
		}
	};

	let uToast = ref(null);
	let loading = ref(null);

	// 业务平台相关
	let businessList = reactive({
		businessName: '', // 业务平台选择名称
		businesss: [], // 业务平台数据列表
		businessNameList: [], // 业务数据名字平台
		businessIndex: ''
	});
	// 获取业务平台列表数据
	let getThirdPartySystem = async () => {
		textareaState.value = false // 文本框隐藏
		loading.value.openLoading('加载中···'); // 打开loading
		const data = await proxy.$http.get({ url: '/thirdPartySystem/thirdPartySystem/page' });
		loading.value.closeLoading(); // 关闭loading
		textareaState.value = true
		// console.log('获取业务平台列表数据', data);
		if (data.code == 200) {
			data.data.records.forEach(res => {
				businessList.businessNameList.push(res.systemName);
				businessList.businesss.push({ id: res.id, systemName: res.systemName });
			});
		}
	};
	// 确定业务平台弹窗
	let changeBusiness = e => {
		// console.log('确定业务平台', e.detail);
		businessList.businessName = businessList.businessNameList[e.detail.value];
		businessList.businessIndex = businessList.businesss[e.detail.value].id
		paramsSumbit.thirdPartySystemId = businessList.businessIndex;
		configSystem.configSystemList = [] // 清空各个类型的数据
		getConfigSystem(paramsSumbit.thirdPartySystemId); // 获取接口配置列表列表数据
	};
	// 获取接口配置列表列表数据
	let configSystem = reactive({
		configSystemList: [],
		singleInfoBox: [], // 单选（多个）字段
		singleInfoList: [], // 单选（多个）循环出来的数据
		multipleInfoBox: [], // 多选（多个）字段
		multipleInfoList: [], // 多选（多个）循环出来的数据
		treeInfoBox: [], // 树形结构（多个）字段
		treeInfoList: [], // 树形结构（多个）循环出来的数据
		singleInfoLinksBox:[], // 单选联动（联动的 linkageField需要选中的参数）
		singleInfoLinksList:[]
	})
	// 请求接口数据
	let getRequestSystem = async (res,params,list,type) => {
		uni.request({
			url: res.thirdSystemApi,
			method: 'post',
			data: params,
			success: item => {
				const data = item.data
				
				if(type == 3){
					data.data.records.forEach(res => {
						res.id = Number(res.id)
					})
				}
				
				// console.log('请求的数据-----单选', item.data);
				
				if (data.code == 200) {
					list.push({
						pikerInfo: data.data.records || data.data,
						id: res.id
					})
				}
			}
		})
	};
	// 获取各个类型的数据
	configSystem.configSystemList = []
	let getConfigSystem = async id => {
		textareaState.value = false // 文本框隐藏
		loading.value.openLoading('加载中···'); // 打开loading
		const data = await proxy.$http.get({ url: `/thirdPartySystem/thirdPartySystem/config_list/${id}` });
		loading.value.closeLoading(); // 关闭loading
		// console.log('获取接口配置列表列表数据', data);
		if (data.code == 200) {
			data.data.forEach(res => {
				configSystem.configSystemList.push({
					...res,
					treeName: '请选择',
					singleIndex: ''
				})
			})
			configSystem.singleInfoBox = [] // 清空单选的数据列表
			configSystem.multipleInfoBox = [] // 清空多选的数据列表
			configSystem.treeInfoBox = [] // 清空树形的数据列表
			configSystem.singleInfoLinksBox = [] // 清空单选联动的数据列表
			let linkageField = '';
			configSystem.configSystemList.forEach(res => {
				if (res.fieldType == 2 || res.fieldType == 3 || res.fieldType == 5 || res.fieldType == 6) {
				  if (res.fieldType == 6) {
					linkageField = res.linkageField; // 单选联动的字段
				  }
				  if (linkageField && linkageField.length > 0 && linkageField == res.fieldKey) {
					  // 排除需要联动加载的数据
					// return false
				  } else {
					let params = {}
					if(res.childrens && res.childrens.length>0){
						res.childrens.forEach( child =>{
							if (child.reqParamType == 3) {
								params[child.reqParamKey] = ''
							  } else if (ap.reqParamType == 1) {
								params[child.reqParamKey] = '1';
							  } else if (ap.reqParamType == 2) {
								params[child.reqParamKey] = '10';
							  }
						})
					}
					uni.request({
						url: res.thirdSystemApi,
						method: 'post',
						data: params,
						success: item => {
							// console.log('请求的数据-----单选', item.data);
							const data = item.data
							if (data.code == 200) {
								res.pikerInfo = data.data.records || data.data;
							}
						}
					})
				  }
				}
				
			})
			console.log('循环出来单选-多选-树形的参数-----', configSystem)

			loading.value.openLoading('加载中···')
			setTimeout(() => {
				loading.value.closeLoading()
				// console.log(installId, '最终数据-----', configSystem.configSystemList)
				if (installId) {
					thirdPartySystemBox.thirdPartySystemConfigList.forEach(res => {
						configSystem.configSystemList.forEach(item => {
							if (item.id == res.id) {
								if (res.fieldType == 2 || res.fieldType == 3 || res.fieldType == 5|| res.fieldType == 6) {
									item.fieldValue = res.fieldValue.split(',') || [] // .map(Number) || []
									item.fieldValueStr = res.fieldValueStr || ''
									item.treeName = res.fieldValueStr || '请选择'
									item.singleIndex = Number(res.fieldValue) || []
								} else {
									item.fieldValue = res.fieldValue || ''
									item.fieldValueStr = res.fieldValueStr || ''
								}
							}
						})
					})
					// console.log('最终数据-----详情返回的', configSystem.configSystemList)
				}

				textareaState.value = true // 文本框隐藏
			}, 2500)
		}
	};

	// 单选系列---------------------------------
	let singleBox = reactive({ singleIndex: '' })
	// 单选确定选择
	let changeSingle = (e, item) => {
		// console.log(e,'---单选选中的信息------', item)
		let pikerInfo = item.pikerInfo
		let idx = e.detail.value

		item.fieldValue = pikerInfo[idx][item.fieldKey]
		item.fieldValueStr = pikerInfo[idx][item.fieldLabel]

		let params = {}
		if(item.fieldType == 6){
			configSystem.configSystemList.forEach( links =>{
				// 找出联动的字段的api地址，以及传参
				if(links.fieldKey == item.linkageField){
					// console.log('links.fieldValue===',links.fieldValue)
					if(links.fieldValue){
						links.fieldValue = ''
						links.fieldValueStr = ''
						links.treeName = '请选择'
					}
					if(links.childrens && links.childrens.length>0){
						links.childrens.forEach( child =>{
							params = {
								[child.reqParamKey]: item.fieldValue,
								current: 1, size: 100
							}
						})
					}
					uni.request({
						url: links.thirdSystemApi,
						method: 'post',
						data: params,
						success: item2 => {
							// console.log(configSystem.treeInfoList,'请求的数据-----树形结构', item2.data);
							const data = item2.data
							if (data.code == 200) {
								links.pikerInfo = data.data.records || data.data;
								
							}
						}
					})
				}
			})
		}
		// console.log('configSystem.configSystemList', configSystem.configSystemList)
		// console.log(configSystem.treeInfoBox,'configSystem.configSystemList222222')
	}

	// 多选系列---------------------------------
	let multipleBox = reactive({
		multipleState: false, // 多选框显/隐
		multipleName: '', // 多选当前选择的名称
		multipleIndex: [], // 所选当前选中
		multipleList: [], // 多选列表数据
		multipleItem: {}, // 当前被选中的对象
		multipleInterimIndex: [], // 当前选中的数据index集合（临时）
		fieldLabel: '' // 当前得名称
	})
	// 打开多选弹窗
	let multipleClick = (item) => {
		// console.log('当前点击的数据-----item', item, item.fieldName)
		multipleBox.multipleItem = {}
		multipleBox.multipleInterimItem = []
		multipleBox.multipleIndex = []
		multipleBox.multipleList = []
		multipleBox.fieldLabel = ''
		multipleBox.multipleItem = item
		multipleBox.fieldLabel = item.fieldLabel
		multipleBox.multipleInterimIndex = item.fieldValue || [] // 给当前选中赋值
		multipleBox.multipleIndex = item.fieldValue || [] // 给当前选中赋值
		multipleBox.multipleList = item.pikerInfo // 给当前'多选'列表数据赋值
		multipleBox.multipleList.forEach(res => {
			let name = 'fieldLabel'
			let names = item.fieldLabel
			res[name] = res[names]
		})
		multipleBox.multipleState = true
		textareaState.value = false // 文本框隐藏

	}
	// 关闭多选框
	let closeMultiple = () => {
		textareaState.value = true // 文本框隐藏
		multipleBox.multipleState = false
	}
	// 多选---选中触发
	let multipleChange = e => {
		// console.log('多选---选中的信息------', e)
		multipleBox.multipleIndex = e // 数组选中的值

	}
	// 确定----选择
	let confirmMultiple = () => {
		let pikerInfo = multipleBox.multipleItem.pikerInfo
		// console.log(pikerInfo, 'pikerInfo')
		// console.log(multipleBox.multipleIndex, 'multipleBox.multipleIndex')
		let multipleNameList = [] // 选中的名字集合
		pikerInfo.forEach(res => {
			multipleBox.multipleIndex.forEach(dat => {
				if (dat == res.id) {
					multipleNameList.push(res.manufactorName)
				}
			})
		})
		// 给对应的数组赋值
		configSystem.configSystemList.forEach(res => {
			if (res.id == multipleBox.multipleItem.id) {
				res.fieldValue = multipleBox.multipleIndex
				res.fieldValueStr = multipleNameList.toString()
			}
		})
		// console.log('configSystem.configSystemList', configSystem.configSystemList)
		textareaState.value = true // 文本框打开
		multipleBox.multipleState = false

	}

	// 树形结构系列---------------------------------
	let treeBox = reactive({
		treeState: false, // 树形结构框显/隐
		treeName: '请选择', // 树形结构当前选择的名称
		treeIndex: [], // 所选当前选中
		treeList: [], // 树形结构列表数据
		treeItem: {} // 当前被选中的对象
	})
	// 打开弹出层
	let treeClick = () => {
		console.log('==========0000===')
		textareaState.value = false // 文本框隐藏
	}
	// 关闭弹出层
	let closeTreeClick = () => {
		textareaState.value = true // 文本框展示
	}
	// 确定树形结构------确定选择
	let onchangeTree = (e, item) => {
		console.log(e.detail.value,'----确定-----树形结构',  item);
		if (item.fieldName == '安装区域') {
			if (e.detail.value.length < 3) {
				uToast.value.openuToastError('请选择到安装区域一级')
				return
			}
		}
		let treList = e.detail.value
		treeBox.treeIndex = []
		treeBox.treeName = []
		treList.forEach(res => {
			// console.log(res.value)
			treeBox.treeIndex.push(res.value) // 选中的值
			treeBox.treeName.push(res.text) // 选中的值
		})
		treeBox.treeName = treeBox.treeName.join('/') // 名称数组转字符串
		// 给对应的树形结构数组赋值
		configSystem.configSystemList.forEach(res1 => {
			if (res1.id == item.id) {
				res1.fieldValue = treeBox.treeIndex[treeBox.treeIndex.length - 1]
				res1.fieldValueStr = treeBox.treeName
				res1.treeName = treeBox.treeName
			}
		})
		textareaState.value = true // 文本框打开
		// console.log('要提交的数据----', configSystem.configSystemList)
	};

	// 终端编码相关-----------  输入or扫码
	// 终端编码--输入
	let deviceImeiList = reactive({ deviceImeiInfo: {} })
	let changeDeviceImei = async (e) => {
		// console.log(e.detail, '监听的数值')
		if (e.detail.cursor >= 9) {
			loading.value.openLoading('加载中···'); // 打开loading
			const data = await proxy.$http.get({
				url: '/install/deviceByImei',
				data: {
					deviceImei: e.detail
						.value
				}
			})
			// console.log('当前码返回的数据-----', data)
			if (data.code == 200) {
				deviceImeiList.deviceImeiInfo = data.data
				paramsSumbit.id = deviceImeiList.deviceImeiInfo.id // 设备ID，通过imei获取的设备接口返回
				paramsSumbit.deviceImei = deviceImeiList.deviceImeiInfo.deviceImei // 设备deviceImei，通过imei获取的设备接口返回
        paramsSumbit.deviceName = deviceImeiList.deviceImeiInfo.deviceName
			} else {
				deviceImeiList.deviceImeiInfo = {}
				uToast.value.openuToastError(data.msg);
			}
			loading.value.closeLoading(); // 关闭loading
		}
	}
	// 终端编码--扫码
	let scanCodeClick = async () => {
		uni.scanCode({
			success: function (res) {
				// console.log('条码内容：', res.result);
				loading.value.openLoading('加载中···'); // 打开loading
				proxy.$http.get({ url: '/install/deviceByImei', data: { deviceImei: res.result } })
					.then(
						data => {
							// console.log('当前码返回的数据-----', data)
							loading.value.closeLoading(); // 关闭loading
							if (data.code == 200) {
								deviceImeiList.deviceImeiInfo = data.data
								paramsSumbit.id = deviceImeiList.deviceImeiInfo.id // 设备ID，通过imei获取的设备接口返回
								paramsSumbit.deviceImei = deviceImeiList.deviceImeiInfo
									.deviceImei // 设备deviceImei，通过imei获取的设备接口返回
							} else {
								deviceImeiList.deviceImeiInfo = {}
								uToast.value.openuToastError(data.msg);
							}
						})
			},
			fail(error) {
				uToast.value.openuToastError('扫描失败，请重新扫码');
			}
		});
	}

	// 主机品牌相关----系列操作
	let brands = reactive({
		brandIndex: '',
		brandName: '',
		brandNameList: [],
		brandList: []
	});
	let getBrandList = async () => {
		loading.value.openLoading(); // 打开loading
		const data = await proxy.$http
			.get({ url: '/teleporterManufactor/teleporterManufactor/getManufactorList' });
		loading.value.closeLoading(); // 关闭loading
		// console.log('主机品牌列表数据----', data.data);
		if (data.code == 200) {
			data.data.forEach(res => {
				brands.brandNameList.push(res.manufactorName);
				brands.brandList.push({
					label: res.manufactorName,
					id: res.id
				});
			});
		}
	};
	// 确定主机品牌弹窗
	let confirmBrand = e => {
		// console.log('确定主机品牌弹窗', e.detail);
		brands.brandIndex = e.detail.value;
		brands.brandName = brands.brandNameList[brands.brandIndex];
		paramsSumbit.manufactorId = brands.brandList[brands.brandIndex].id // 主机品牌ID
	};

	// 省市区相关
	let areaBox = reactive({
		province: [], //省数组
		city: [], //市数组
		district: [], //区数组
		stree: [], // 街道数组
		village: [], // 村数组
		mulSelect: [], //三级联动显示数组，该数组的值为[[province],[city],[district]]
		provinceId: '', //省的id
		cityId: '', // 市的id
		districtId: '', // 区的id
		streeId: [], // 街道id
		villageId: [], // 村id
		streeIndex: '', // 街道选中的index
		villageIndex: '', // 村居选中的index
		address: '', // 省市区
		streeName: '', // 街道名称
		villageName: '' // 村居名称
	})
	// 省市区默认展示
	let getProvince = () => { // 此方法可以继续优化
		// proxy.$http.get({ url: '/blade-system/dept/lazy-tree', data: { parentId: 0 } }).then(res => {
      proxy.$http.get({ url: '/blade-system/region/lazy-tree2', data: { parentCode: 0 } }).then(res => {
			areaBox.province = []
			if (res.code == 200) {
				areaBox.province = res.data;;
				areaBox.mulSelect.push(areaBox.province);
				let id = areaBox.province[0].id;
				proxy.$http.get({ url: '/blade-system/region/lazy-tree2', data: { parentCode: id } }).then(
					res => {
						if (res.code == 200) {
							areaBox.city = res.data;
							areaBox.mulSelect.push(areaBox.city);
							let id = areaBox.city[0].id;
							proxy.$http.get({
								url: '/blade-system/region/lazy-tree2',
								data: { parentCode: id }
							}).then(
								res => {
									if (res.code == 200) {
										areaBox.district = res.data;
										areaBox.mulSelect.push(areaBox.district);
									}
								})
						}
					})
			}
		})
	}
	// 选择当前项触发懒加载
	let colChange = (e) => {
		// console.log('colChange---滑动选择地址的时候触发', e)
		switch (e.detail.column) {
			case 0: //选择市
				areaBox.provinceId = areaBox.mulSelect[0][e.detail.value].id;
				uni.showLoading({ title: '加载中', mask: true });
				proxy.$http.get({
					url: '/blade-system/region/lazy-tree2',
					data: {
            parentCode: areaBox.provinceId
					}
				}).then(
					res => {
						uni.hideLoading();
						// console.log('市的列表数据', res)
						if (res.code == 200) {
							areaBox.city = res.data;
							areaBox.mulSelect[1] = areaBox.city;
							// 获取对应的区县
							uni.showLoading({ title: '加载中', mask: true });
							proxy.$http.get({
								url: '/blade-system/region/lazy-tree2',
								data: { parentCode: areaBox.city[0].id }
							}).then(res => {
								// console.log('区县的列表数据', res)
								uni.hideLoading();
								if (res.code == 200) {
									areaBox.district = res.data;
									areaBox.mulSelect[2] = areaBox.district;
								}
							})
						}
					})
				break;
			case 1: //选择区县
				areaBox.cityId = areaBox.mulSelect[1][e.detail.value].id;
				// console.log(areaBox.cityId, 'areaBox.cityId')
				// 获取对应的乡镇
				uni.showLoading({ title: '加载中', mask: true });
				proxy.$http.get({ url: '/blade-system/region/lazy-tree2', data: { parentCode: areaBox.cityId } })
					.then(
						res => {
							uni.hideLoading();
							if (res.code == 200) {
								areaBox.district = res.data;
								areaBox.mulSelect[2] = areaBox.district;
							}
						})
				break;
			case 2: //选择镇
				break;
			case 3: //选择街道
				break;
			default:
				break;
		}
	}
	// 选择确定（省市区）
	let pickerChange = (e) => {
		//什么都不选的话，e.detail.value的值为[null,null,null,null]
		//只选择省的话，e.detail.value的值为[数字,null,null,null]
		//只选择市的话，e.detail.value的值为[数字,数字,null,null]
		//所以获取e.detail.value的值先判断是否为null，如果为null则取值为0
		for (let i = 0; i < e.detail.value.length; i++) {
			if (e.detail.value[i] === null) {
				e.detail.value[i] = 0;
			}
		}
		let s_province = areaBox.mulSelect[0][e.detail.value[0]]; // 获取选中的省
		let s_city = areaBox.mulSelect[1][e.detail.value[1] || 0]; // 获取选中的市
		let s_district = areaBox.mulSelect[2][e.detail.value[2] || 0]; //获取选中的区
		areaBox.address = s_province.title + s_city.title + s_district.title; // 当前选中的地址
		paramsSumbit.deptProvinceId = s_province.id // 省ID
		paramsSumbit.deptCityId = s_city.id // 市ID
		paramsSumbit.deptAreaId = s_district.id // 区ID
		// 清空街道的参数
		areaBox.streeName = ''
		areaBox.streeIndex = ''
		paramsSumbit.deptStreetId = ''
		// 清空村的参数
		areaBox.villageName = ''
		areaBox.villageIndex = ''
		paramsSumbit.deptVillageId = ''
		getStreet(s_district.id) // 获取街道的数据列表
	}
	// 获取街道的数据列表
	let getStreet = (id) => {
		loading.value.openLoading('加载中···'); // 打开loading
		textareaState.value = false // 文本框隐藏
		proxy.$http.get({ url: '/blade-system/region/lazy-tree2', data: { parentCode: id } }).then(res => {
			loading.value.closeLoading(); // 关闭loading
			textareaState.value = true
			// console.log('获取街道的数据列表---', res)
			if (res.code == 200) {
				areaBox.stree = res.data
			}
		})
	}
	// 选择确定（街道）
	let streeChange = (e) => {
		// console.log('选择确定（街道）---', e)
		areaBox.streeName = areaBox.stree[e.detail.value].title
		paramsSumbit.deptStreetId = areaBox.stree[e.detail.value].id // 街道ID
		areaBox.villageName = ''
		areaBox.villageIndex = ''
		paramsSumbit.deptVillageId = ''
		getVillage(paramsSumbit.deptStreetId) // 获取村居的数据列表
	}
	// 获取村居的数据列表
	let getVillage = (id) => {
		loading.value.openLoading('加载中···'); // 打开loading
		textareaState.value = false // 文本框隐藏
		proxy.$http.get({ url: '/blade-system/region/lazy-tree2', data: { parentCode: id } }).then(res => {
			loading.value.closeLoading(); // 关闭loading
			textareaState.value = true
			// console.log('获取村居的数据列表---', res)
			if (res.code == 200) {
				areaBox.village = res.data
			}
		})
	}
	// 选择确定（村居）
	let villageChange = (e) => {
		// console.log('选择确定（村居）---', e)
		areaBox.villageName = areaBox.village[e.detail.value].title
		paramsSumbit.deptVillageId = areaBox.village[e.detail.value].id // 村居ID
		// console.log('paramsSumbit', paramsSumbit)
	}
	// 点击进入地图选择地址
	let chooseLocationClick = () => {
		uni.chooseLocation({
			success: function (res) {
				paramsSumbit.longitude = res.longitude
				paramsSumbit.latitude = res.latitude
				paramsSumbit.address = proxy.$check.emptySpecial(res.address)
			}
		});
	}
	// 上传图片
	let compressImgs = ref(null)
	let imgBox = reactive({
		installImg: [], // 安装图片
		fireImg: [], // 消防图片
		mentouValue: [], //图片value值
		sizeType: ['compressed'], //设置图片压缩
		sourceType: ['camera', 'album'], //这里设置的是只能使用照相机，不能从相册里传照片
	})
	//选择照片
	let mentouSelect = (e) => {
		this.timeSeting()
		if (e.tempFilePaths && e.tempFiles) {
			toUpload(e.tempFiles[0].file)
		}
	}
	let toUpload = (e) => {
		console.log(e, '当前的照片')
	}
	// 拍照上传后返回------
	let upateImgClick = (type) => {
		wx.chooseImage({
			count: 1,
			sizeType: ['compressed'], // original 原图，compressed 压缩图
			sourceType: ['camera', 'album'],
			success: function (res) {
				console.log(res.tempFiles, '拍照---=-=-=-=-=-=')
				let item = res.tempFiles[0]
				imageCompress(item).then(resImgs => {
					// console.log('压缩后的数据==--', resImgs)
					textareaState.value = false // 文本框隐藏
					loading.value.openLoading('上传中···'); // 打开loading
					let header = {
						Authorization: config.Authorization,
						'Blade-Auth': uni.getStorageSync('token'),
						'Tenant-Id': uni.getStorageSync('tenantId')
					};
					uni.uploadFile({
						url: config.baseUrl + '/blade-resource/oss/endpoint/put-file',
						filePath: resImgs.path,
						name: 'file',
						formData: { file: 'multipart/form-data' }, // , businessType: 'examineProblemPhoto'
						header: header,
						success: res => {
							textareaState.value = true
							loading.value.closeLoading(); // 关闭loading
							// console.log('上传照片返回的数据-------', JSON.parse(res.data).data.link);
							const data = JSON.parse(res.data);
							if (data.code == 200) {
								if (type == 1) {
									imgBox.installImg.push(data.data.link);
								} else if (type == 2) {
									imgBox.fireImg.push(data.data.link);
								}
							} else {
								uToast.value.openuToastError('上传失败，请重新上传'); // 打开loading
							}
						},
						fail() {
							loading.value.closeLoading(); // 关闭loading
							uToast.value.openuToastError('上传失败，请重新上传'); // 打开loading
						}
					});
				})
			}
		});
	};
	// 压缩图片
	let imageCompress = (file) => {
		return new Promise((resolve, reject) => {
			let { size, path } = file
			let type = Date.now()
			//大于1M进行压缩
			if ((size / 1024 / 1024) < 1) {
				resolve(file)
				return false
			}
			uni.compressImage({
				src: path,
				quality: 80,
				success: res => {
					// console.log('大于1M, 压缩后的数据----', res)
					let newPath = res.tempFilePath //  + type
					let newName = res.tempFilePath.split("/")[res.tempFilePath.split(
						"/").length - 1] + type
					uni.getFileInfo({
						filePath: res.tempFilePath,
						success: async (info) => {
							let newFile = {
								...file,
								size: info.size,
								path: newPath,
								name: newName,
								tempFilePath: res.tempFilePath
							}
							resolve(await imageCompress(newFile))
						}
					})
				}
			})
		})
	}
	// 删除图片
	let deteleImgClick = (index, type) => {
		if (type == 1) {
			imgBox.installImg.splice(index, 1);
			uToast.value.openuToastSuccess('删除成功'); // 打开loading
		} else if (type == 2) {
			imgBox.fireImg.splice(index, 1);
			uToast.value.openuToastSuccess('删除成功'); // 打开loading
		}

	};
	// 预览图片
	let previewImgClick = (item, type) => {
		if (type == 1) {
			uni.previewImage({
				urls: imgBox.installImg,
				current: item
			});
		} else if (type == 2) {
			uni.previewImage({
				urls: imgBox.fireImg,
				current: item
			});
		}
	};

	// 存草稿----------
	let saveDraft = () => {
		if (!paramsSumbit.id) {
			uToast.value.openuToastError('请输入或扫描二维码获取终端编码，否则不能存草稿')
			return
		}
		configSystem.configSystemList.forEach(res => {
			if (res.fieldType == 2 || res.fieldType == 3 || res.fieldType == 5 || res.fieldType == 6) {
				// console.log(typeof (res.fieldValue), res.fieldValue, 'sadsadasd')
				if (typeof (res.fieldValue) == 'string') {
					res.fieldValue = res.fieldValue
				} else {
					res.fieldValue = res.fieldValue.toString()
				}

			}
			if (res.fieldType == 1 || res.fieldType == 4) {
				res.fieldValueStr = res.fieldValue
			}
		})
		paramsSumbit.thirdPartySystemConfigList = configSystem.configSystemList
		let installImg = imgBox.installImg.toString()
		let fireImg = imgBox.fireImg.toString()
		paramsSumbit.installImg = installImg
		paramsSumbit.fireImg = fireImg
		uni.showModal({
			title: '温馨提示',
			content: '是否存草稿？',
			showCancel: true,
			confirmColor: '#2954FD',
			success: function (res) {
				if (res.confirm) {
					textareaState.value = false // 文本框隐藏
					loading.value.openLoading('存储中···'); // 打开loading
					proxy.$http.post({ url: '/install/saveDraft', data: paramsSumbit }).then(res => {
						loading.value.closeLoading(); // 关闭loading
						textareaState.value = true
						// console.log('存草稿返回------', res)
						if (res.code == 200) {
							uToast.value.openuToastSuccess(res.msg)
							setTimeout(() => {
								proxy.$pageJump.reLaunch('/pages/views/install/index');
							}, 500)
						} else {
							uToast.value.openuToastError(res.msg)
						}
					})
				}
			}
		})
	}
	// 提交安装---------
	let submitInstall = () => {
		if (!paramsSumbit.thirdPartySystemId) {
			uToast.value.openuToastError('请选择业务平台')
			return
		}
		configSystem.configSystemList.forEach(res => {
			if (res.isRequired == 1) {
				if (!res.fieldValue) {
					uToast.value.openuToastError(`${res.fieldName}为必填项`)
					throw 'error'
				}
			}
			if (res.fieldType == 2 || res.fieldType == 3 || res.fieldType == 5 || res.fieldType == 6) {
				res.fieldValue = res.fieldValue.toString()
			}
			if (res.fieldType == 1 || res.fieldType == 4) {
				res.fieldValueStr = res.fieldValue
			}
		})
		paramsSumbit.thirdPartySystemConfigList = configSystem.configSystemList
		// console.log('==paramsSumbit====', paramsSumbit)
		if(!paramsSumbit.deviceName) {
		  uToast.value.openuToastError('请输入终端名称')
		  return
		}
		if (!paramsSumbit.id) {
			uToast.value.openuToastError('请输入或扫描二维码获取终端编码')
			return
		}
		if (deviceImeiList.deviceImeiInfo.isTeleporter == 1) {
			if (!paramsSumbit.manufactorId) {
				uToast.value.openuToastError('请选择主机品牌')
				return
			}
		}
		if (!paramsSumbit.deptProvinceId) {
			uToast.value.openuToastError('请选择安装区域')
			return
		}
		if (!paramsSumbit.address) {
			uToast.value.openuToastError('请选择详细位置')
			return
		}
		if (!paramsSumbit.position) {
			uToast.value.openuToastError('请输入安装位置')
			return
		}
		let installImg = imgBox.installImg.toString()
		let fireImg = imgBox.fireImg.toString()
		paramsSumbit.installImg = installImg
		paramsSumbit.fireImg = fireImg
		uni.showModal({
			title: '温馨提示',
			content: '是否提交安装？',
			showCancel: true,
			confirmColor: '#2954FD',
			success: function (res) {
				if (res.confirm) {
					textareaState.value = false // 文本框隐藏
					loading.value.openLoading('提交中···'); // 打开loading
					proxy.$http.post({ url: '/install/install', data: paramsSumbit }).then(res => {
						loading.value.closeLoading(); // 关闭loading
						textareaState.value = true
						// console.log('提交安装返回------', res.data)
						if (res.code == 200) {
							uToast.value.openuToastSuccess(res.msg)
							setTimeout(() => {
								proxy.$pageJump.reLaunch('/pages/views/install/index');
							}, 500)
						} else {
							uToast.value.openuToastError(res.msg)
						}
					})
				}
			}
		})




	}
</script>

<style scoped lang="scss">
	.addDevice {
		&-box {
			&-title {
				position: relative;
				padding: 40rpx;
			}

			&-title::before {
				content: '';
				width: 8rpx;
				height: 30rpx;
				background-color: #2954fd;
				position: absolute;
				left: 20rpx;
			}

			&-content {
				&-title {
					position: relative;
				}

				.ident::before {
					content: '*';
					font-size: 30rpx;
					color: red;
					position: absolute;
					right: -15rpx;
					top: 0;
				}

				.codeBox {
					position: relative;

					input {
						width: 86%;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.productInfo {
					background-color: #f5f7fb;
				}
			}
		}

		&-butList {
			width: 90%;
			margin: 80rpx 5% 0;
			padding-bottom: 80rpx;

			view {
				width: 48%;
			}
		}
	}

	textarea {
		width: 100%;
		height: 140rpx;
	}

	.imgDevice {
		width: 100%;
		height: 155rpx;
	}

	.ident1::before {
		content: '*';
		font-size: 30rpx;
		color: red;
		position: absolute;
		right: -8rpx;
		top: 0;
	}

	.multipleBox {
		// max-height: 800rpx;
		padding: 80rpx 30rpx 180rpx;

		&-butList {
			margin: 5%;
			position: fixed;
			bottom: 1%;
			left: 0;
			width: 90%;

			view {
				width: 40%;
			}
		}
	}

	.imgsBox {
		&-img {
			width: 25%;
			padding: 1%;
		}
	}
</style>